<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>成长记录</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="#(CPATH)/view/css/jquery-weui.css" />
    <link rel="stylesheet" href="#(CPATH)/view/css/style.css" />
    <script src="#(CPATH)/view/js/jquery.js"></script>
    <script src="#(CPATH)/view/js/lib.js"></script>
    <script src="#(CPATH)/view/js/jquery-weui.js"></script>
    <script type="text/javascript" src="#(CPATH)/view/layer_mobile/layer.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
</head>

<body class=" ">
    <!-- 头部 -->
    <!-- 头部 -->
    <!-- 内容 -->
    <div class="main">
        <div class="wp">
            <form action="" method="" class="m-form2">
            	<input type="hidden" name="id" id="id" value="#(petAnimalRecord.id??'')" >
                <div class="item">
                    <span>当前体重：</span>
                    <div class="r-con">
                        <input type="number" id="weight" maxlength="5" value="#(petAnimalRecord.weight??'0')">
                        <em>KG</em>
                    </div>
                </div>
                <div class="item">
                    <span>消费项目：</span>
                    <div class="r-con">
                        <input type="text" id="project" value="#(petAnimalRecord.project??'')" maxlength="50">
                    </div>
                </div>
                <input type="hidden" name="pics" id="pics" value="#(petAnimalRecord.pics??'')" >
                <div class="item item-txt">
                    <textarea id="idea" placeholder="这一刻的想法...">#(petAnimalRecord.idea??'')</textarea>
                    <div class="m-pic2 fix">
                    
                    	#if(petAnimalRecord.pics??'' != '')
                    		#for(x:picList)
	                    	<div class="pic">
	                              <img src="#(CPATH)#(x??'')" alt="">
	                        </div>
	                        #end
                        #end
                        
                        <div class="pic" id="default">
                            <div class="con">
                                <a href="javascript:choicePicture();" class="a-file">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
	                <span>手机号：</span>
	                <div class="r-con">
	                    <input type="number" title="need" placeholder="请输入会员手机号"  onchange="getAnimal()"
	                    id="mobile" name="mobile" maxlength="11" class="js-inp1" value="#(mobile??'')"/>
	                </div>
	            </div>
                <div class="item">
	                <span>宠物：</span>
	                <div class="r-con">
	                    <input type="text" class="a-select inp" id="animalIds" value="#(animalName??'')">
	                </div>
	            </div>
                <div class="item item-b">
                    <input type="text" class="a-1 inp" id="position" value="所在位置" readonly="readonly">
                </div>
                <input type="button" class="sub" value="提交" onclick="save()">
            </form>
        </div>
    </div>
    <!-- 内容 -->
    <!-- 底部 -->
    <!-- 底部 -->
    <script type="text/javascript" class="uploader js_show">
    $(function () {

        wx.config({
    	    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    	    appId: '#(appId)', // 必填，公众号的唯一标识
    	    timestamp: #(timestamp), // 必填，生成签名的时间戳
    	    nonceStr: '#(noncestr)', // 必填，生成签名的随机串
    	    signature: '#(signature)',// 必填，签名
    	    jsApiList: [
    			'chooseImage'
    			,'previewImage'
    			,'uploadImage'
    			,'downloadImage'
    			,'checkJsApi'
    	        ,'openLocation'
    	        ,'getLocation'
    	    ] // 必填，需要使用的JS接口列表
    	});
        
        wx.ready(function(){
        	wx.getLocation({
        		type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        		success: function (res) {
    	    		var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
    	    		var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
    	    		var speed = res.speed; // 速度，以米/每秒计
    	    		var accuracy = res.accuracy; // 位置精度
    	    		$.ajax({
    	        		type: "post",
    	        		url: "#(CPATH)/map",
    	        		data: {
    	        			  "location": latitude + ',' + longitude
    	        		},
    	        		dataType: "JSON",
    	        		success: function(data) {
    	        			if(data.status=='0'){
    	        				$('#position').val(data.result.address_reference.landmark_l2.title);
    	        			}
    	        		},
    	        		error: function() {}
    	        	});
        		},
      	        cancel: function (res) {
      	            
      	        }
        	});
    	});

    	wx.error(function(res){
    		
    	});
    	
    	$("#animalIds").select({
            title: "宠物",
            items: ["1", "2"]
        });
    		
    })   
</script>
<script>
var fileHidenPath = '#(petAnimalRecord.pics??'')';
getAnimal();
function getAnimal(){
	$.ajax({
		type: "post",
		url: "#(CPATH)/animalRecord/animalList",
		data: {
			  "openId": '#(openId)'
			  ,"mobile": $("#mobile").val()
		},
		dataType: "JSON",
		success: function(data) {
			
			var myanimals = new Array();
			for(var i = 0; i < data.length; i++) {
				myanimals[i] =  data[i].name;
			}
			
			$("#animalIds").select("update",{items: myanimals});

		},
		error: function() {}
	});	
}

function save(){
	var weight = $("#weight").val();
	if (parseFloat(weight).toString() == "NaN") {
		layer.open({
    	    content: '体重请输入数值！'
    	    ,skin: 'msg'
    	    ,time: 2 //2秒后自动关闭
    	  });
		return;
	}
	var pics = $("#pics").val();
	if(pics == ''){
		layer.open({
    	    content: '请发布图片！'
    	    ,skin: 'msg'
    	    ,time: 2 //2秒后自动关闭
    	  });
		return;
	}
	var project = $("#project").val();
	if(project == ''){
		layer.open({
    	    content: '请填写消费项目！'
    	    ,skin: 'msg'
    	    ,time: 2 //2秒后自动关闭
    	  });
		return;
	}
	var animalIds = $("#animalIds").val();
	if(animalIds == ''){
		layer.open({
    	    content: '请选择宠物！'
    	    ,skin: 'msg'
    	    ,time: 2 //2秒后自动关闭
    	  });
		return;
	}
	$.ajax({
		type: "post",
		url: "#(CPATH)/animalRecord/save",
		data: {
			  "petAnimalRecord.pics": $("#pics").val()
			  ,"petAnimalRecord.id": $("#id").val()
			  ,"petAnimalRecord.weight": $("#weight").val()
			  ,"petAnimalRecord.project": $("#project").val()
			  ,"petAnimalRecord.idea": $("#idea").val()
			  ,"petAnimalRecord.position": $("#position").val()
			  ,"petAnimalRecord.pics": $("#pics").val()
			  ,"animalName": $("#animalIds").val()
		},
		dataType: "JSON",
		success: function(data) {
			if(data.state=='ok'){
				layer.open({
		    	    content: '保存成功！'
		    	    ,skin: 'msg'
		    	    ,time: 2 //2秒后自动关闭
		    	    ,end: function () {
		    	    	window.location.href = '#(CPATH)/animalRecord';
		            }
		    	  });
			}else{
				layer.open({
		    	    content: '保存失败！'
		    	    ,skin: 'msg'
		    	    ,time: 2 //2秒后自动关闭
		    	    
		    	  });
			}

		},
		error: function() {}
	});		  
}

var localIds = [];
function choicePicture(){
    wx.chooseImage({
        count: 9, // 默认9
        sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
        	layer.open({type: 2});
            localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            syncUpload();
        }
    });
}

function syncUpload() {
    if (localIds.length) {
        var localId = localIds.pop();
        wx.uploadImage({
            localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
            isShowProgressTips: 0, // 默认为1，显示进度提示
            success: function (res) {
                var mediaId = res.serverId; // 返回图片的服务器端ID，即mediaId
                //将获取到的 mediaId 传入后台 方法savePicture
                $.ajax({
					type: "post",
					url: "#(CPATH)/animalRecord/saveImages",
					data: {
						"mediaId" : mediaId
					},
					dataType: "JSON",
					async: false,
					success: function(data) {
						fileHidenPath +=  data.filePath + ',';
						$("#pics").val(fileHidenPath);
                    	var imgHtml = '<div class="pic"><img src="#(CPATH)'+data.filePath+'"></div>';
                    	$("#default").before(imgHtml);
                    	syncUpload();
					},
					error: function() {}
				});		
            },
            fail: function (res) {
                layer.msgModal('上传图片失败，请重试')
            }
        });
    }else{
    	layer.closeAll('loading');
    }
}
</script>